<template>
    <div class="tab">
        <!--<tab-nav :navData="navData"></tab-nav>-->
        <nav-bar
                :navData="navData"
                :curIdx="tabIndex"
                @changeTabIndex="changeTabIndex">
        </nav-bar>
        <tab-content :contentData="contentData"
        ></tab-content>
    </div>
</template>

<script>
    import TabNav from './Nav';
    import TabContent from './Content';
    // 引入数据
    import navData from '@/data/nav';
    import contentData from '@/data/content';
    // Vuex
    import {mapState, mapMutations} from 'vuex';

    export default {
        name: "Tab",
        components: {
            TabNav,
            TabContent
        },
        computed: {
            ...mapState(['tabIndex'])
        },
        data() {
            return {
                navData,
                contentData
            }
        },
        methods: {
            ...mapMutations(['changeTabIndex'])
        }
    }
</script>

<style scoped>
    .tab {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        border: lightcoral solid 1px;
    }
</style>